<template>
	<view :style="item.compStyle" :class="item.compClass">
		<!-- <titleBettweenAndContent :title="item.attributes.title" :titleRightText="item.attributes.titleRightText">
			<view slot="content"> -->
				<image :src="getTopImageConfig.src" :mode="getTopImageConfig.mode" class="top-image" :height="getTopImageConfig.height" @tap.stop="$emit('click', getTopImageConfig)"></image>
				<view class="bot-content" :style="{ backgroundColor: item.attributes.botContentBgColor || '#ffffff' }">
					<view class="list-item pre-hover" hover-class="hover" v-for="(item, index) in getList" :key="index" @tap.stop="$emit('click', item)">
						<image src="" mode="aspectFill" class="product-img"></image>
						<text class="product-name">这是一条标题这是一条标题这是一条标题这是一条标题这是一条标题</text>
						<view class="product-bot-box">
							<text class="price price-weight">￥600</text>
							<text class="through-price">￥800</text>
						</view>
					</view>
					<view style="width: 220rpx; height: 0;"></view>
				</view>
			<!-- </view>
		</titleBettweenAndContent> -->
	</view>
</template>

<script>
	import QSSuperComponentCustomCompMixin from '../QSSuperComponentCustomCompMixin.js'
	export default {
		mixins: [QSSuperComponentCustomCompMixin({componentType:'bargainBuy-1'})],
		props: {
			item: {
				type: Object,
				default: ()=>({})
			}
		},
		computed: {
			getTopImageConfig() {
				const o = this.item?.attributes?.topImageConfig || {};
				return { src: '', mode: 'aspectFill', height: '200rpx', ...o };
			},
			getList() {
				return this.item?.attributes?.list || [];
			}
		},
	}
</script>

<style scoped>
	.top-image{
		display: block;
		width: 100%;
		background-color: #F2F2F2;
	}
	.bot-content{
		margin-top: -20rpx;
		position: relative;
		padding: 25rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		border-radius: 20rpx 20rpx 0 0;
	}
	
	.list-item{
		display: flex;
		flex-direction: column;
		width: 220rpx;
		margin-bottom: 25rpx;
	}
	
	.product-img{
		width: 220rpx;
		height: 220rpx;
		background-color: #F2F2F2;
		margin-bottom: 24rpx;
		border-radius: 8rpx;
	}
	.product-name{
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 30rpx;
		margin-bottom: 22rpx;
	}
	
	.product-bot-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.price{
		font-size: 32rpx;
		color: #F52F50;
	}
	.through-price {
		font-size: 24rpx;
		color: #BBBBBB;
		text-decoration: line-through;
	}
</style>
